<div class="wrap">
  <nz-page-header [nzGhost]="false">
    <nz-page-header-title>环境配置</nz-page-header-title>
    <nz-page-header-subtitle>请配置需要同步的数据库</nz-page-header-subtitle>
    <nz-page-header-extra>
      <button nz-button (click)="loadData()">刷新</button>
      <button nz-button nzType="primary" (click)="add()">新建</button>
    </nz-page-header-extra>
  </nz-page-header>
</div>
<nz-card class="mt10">
  <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]="false" [nzFrontPagination]="false">
    <thead>
    <tr>
      <th>标题</th>
      <th>源数据库地址</th>
      <th>源数据库端口</th>
      <th>源数据库用户</th>
      <th>目标数据库地址</th>
      <th>目标数据库端口</th>
      <th>目标数据库用户</th>
      <th>表</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{ data.title }}</td>
      <td>{{ data.fromHost }}</td>
      <td>{{ data.fromPort }}</td>
      <td>{{ data.fromUsername }}</td>
      <td>{{ data.toHost }}</td>
      <td>{{ data.toPort }}</td>
      <td>{{ data.toUsername }}</td>
      <td>
        <ng-container *ngIf="!data.list || data.list.length == 0">
          无
        </ng-container>
        <ng-container *ngIf="data.list && data.list.length <= 2">
          <span *ngFor="let item of data.list; let isLast=last">
            {{item.name}}{{isLast ? '' : ', '}}
          </span>
        </ng-container>
        <ng-container *ngIf="data.list && data.list.length > 2">
          <ng-container *ngFor="let item of data.list; let i=index; let isLast=last">
            <span *ngIf="i<2">
              {{item.name}}{{ i < 1 ? ',' : '' }}
            </span>
          </ng-container>
          等{{data.list.length}}张表
        </ng-container>
      </td>
      <td>
        <a (click)="detail(data.id)">编辑</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="delete(data.id)">删除</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
</nz-card>
